<template>
  <div class="signup">
    <div class="form-wrap">
      <div class="form-title">登录</div>
      <div class="form-content">
        <div class="form-group">
          <label for="uid"><span class="fa fa-user"></span></label>
          <input type="text" class="form-control" id="uid" placeholder="用户名" v-model="uid" />
        </div>
        <div class="form-group">
          <label for="nickname"><span class="fa fa-user-o"></span></label>
          <input type="text" class="form-control" id="nickname" placeholder="昵称" v-model="nickname" />
        </div>
        <div class="form-group">
          <label for="password"><span class="fa fa-lock"></span></label>
          <input type="password" class="form-control" id="password" placeholder="密码" v-model="password" />
        </div>
      </div>
      <div class="form-hint" v-if="error" v-text="hint"></div>
      <div class="form-btn" @click="signup">注册</div>
      <div class="form-link">已有账号？<router-link to="/login">现在登录</router-link></div>
    </div>
  </div>
</template>
<script>
import { mapState } from 'vuex';

export default {
  name: 'signup',
  data() {
    return {
      uid: '',
      password: '',
      nickname: '',
      status: true,
      connect: false,
      hint: '',
      error: false,
    };
  },
  computed: {
    ...mapState({
      accountStatus: state => state.account.status,
    }),
  },
  methods: {
    signup() {
      this.hideHint();
      if (!this.uid) {
        this.showHint('请输入用户名');
        return;
      }
      if (!this.nickname) {
        this.showHint('请输入昵称');
        return;
      }
      if (!this.password) {
        this.showHint('请输入密码');
        return;
      }
      this.$store.dispatch('signup', {
        uid: this.uid,
        password: this.password,
        nickname: this.nickname,
      })
        .then(() => {
          this.$router.replace({ path: '/' });
        })
        .catch((msg) => {
          this.showHint(msg);
        });
    },
    showHint(text) {
      this.hint = text;
      this.error = true;
    },
    hideHint() {
      this.error = false;
      this.hint = '';
    },
  },
};
</script>
<style>
.signup {
  margin-top: 100px;
  margin-bottom: 100px;
}
</style>
